<template>
  <el-tabs type="border-card" style="height: 400px" @tab-click="tabClick">
    <el-tab-pane label="分类能耗同比（今年与去年同期对比）">
      <div ref="sameCompareChat" style="height: 330px;"></div>
    </el-tab-pane>
    <el-tab-pane label="分类能耗环比（本月和上个月对比）">
      <div ref="aroundCompareChat" style="height: 330px;" data-name="around"></div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>

import * as IncreaseUtil from '@/components/util/IncreaseUtil'

export default {
  props: [
    'selectedEnergyId',
    'selectedEnergy',
    'selectedShowType'
  ],
  watch : {
    selectedShowType(n, o) {
      if (n !== o) {
        this.initChart(true)
        this.initChart(false)
      }
    }
  },
  data() {
    return {
      aroundList: [],
      sameList: [],
      chart: null,
      option: {
        tooltip: {
          trigger: 'axis',
          formatter: function (c) {
            const itemName = c[0].name
            const selectedEnergy = JSON.parse(c[0].seriesName)
            let unite = selectedEnergy.standUnite
            if (itemName !== '总量' && selectedEnergy.showType !== 'stand') {
              if (selectedEnergy.showType === 'real') {
                unite = IncreaseUtil.getJsonArrValueByField(selectedEnergy.list, 'name', itemName, 'unite')
              }else if (selectedEnergy.showType === 'cash') {
                unite = selectedEnergy.cashUnite
              }
            }
            let curLabel = selectedEnergy.around ? '本月': '今年'
            let lastLabel = selectedEnergy.around ? '上个月': '去年'
            let label = '项目：' + c[0].name + '<br>'
            label = label + '<fonts style="color:' + c[0].color + '">' + curLabel + '</fonts>：' + c[0].value + ' ' + unite + '<br>'
            label = label + '<fonts style="color:' + c[1].color + '">' + lastLabel + '</fonts>：' + c[1].value + ' ' + unite + '<br>'
            return label;
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: []
          },
          {
            type: 'bar',
            data: []
          }
        ]
      }
    }
  },
  name: "map-view",
  mounted() {
    this.fetchData(this.initChart)
  },
  unmounted() {
  },
  methods: {
    tabClick: function (name) {
      const panelId = name.$el.getAttribute('id');
      this.initChart(panelId === 'pane-1')
    },
    fetchData: function (fuc) {
      const aroundData = {content: {aroundCompare: true}}
      this.$axios({url:'/ems/client/index/energy/time/compare', data: aroundData}).then((content) => {
        this.aroundList = content.list
      })
      const sameData = {content: {aroundCompare: false}}
      this.$axios({url:'/ems/client/index/energy/time/compare', data: sameData}).then((content) => {
        this.sameList = content.list
        fuc(false)
      })
    },
    initChart: function (around) {
      this.option.xAxis.data = [];
      this.option.series = [];
      const list = around ? this.aroundList: this.sameList
      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        this.option.xAxis.data.push(item.itemName);
      }
      const selectedEnergy = this.selectedEnergy
      selectedEnergy.around = around
      const curSeries = {type: 'bar',data: [], name: JSON.stringify(selectedEnergy)}
      const oldSeries = {type: 'bar',data: [], name: JSON.stringify(selectedEnergy) + ' '}
      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        if (item.isAll || this.selectedEnergy.showType === 'stand') {
          curSeries.data.push(this.$doubleVal(item.increaseStandData[0]))
          oldSeries.data.push(this.$doubleVal(item.increaseStandData[1]))
        }else {
          if (this.selectedEnergy.showType === 'real') {
            curSeries.data.push(this.$doubleVal(item.increaseRealData[0]))
            oldSeries.data.push(this.$doubleVal(item.increaseRealData[1]))
          }else if (this.selectedEnergy.showType === 'cash') {
            curSeries.data.push(this.$doubleVal(item.increaseCashData[0]))
            oldSeries.data.push(this.$doubleVal(item.increaseCashData[1]))
          }
        }
      }
      this.option.series.push(curSeries)
      this.option.series.push(oldSeries)

      this.$nextTick(() => {
        const chart = around ? this.$echarts.init(this.$refs.aroundCompareChat): this.$echarts.init(this.$refs.sameCompareChat)
        chart.setOption(this.option)
      })
    }
  },
};
</script>
<style>
</style>
